<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import A1demo from "./components/A1demo.vue";
import A2message from "./components/A2message.vue";
import A3message from "./components/A3message.vue";
import A4ref from "./components/A4ref.vue";
import A5reactive from "./components/A5reactive.vue";
import A6toref from "./components/A6toref.vue";
import A7torefs from "./components/A7torefs.vue";
import B1 from "./components/B72.vue";
import A8Vtextvhtmlvbind from "./components/A21.vue";
import A23 from "./components/A27.vue";
</script>

<template>
  <div>
    <A23></A23>
    <!-- <A22></A22> -->
    <!-- <A8Vtextvhtmlvbind></A8Vtextvhtmlvbind> -->
    <!-- <B1></B1> -->
    <!-- <A7torefs></A7torefs>
    <A6toref></A6toref>
    <A5reactive></A5reactive>
    <A4ref></A4ref>
    <A3message></A3message> 
     <A2message></A2message> 
   <A1demo></A1demo>
  <HelloWorld  />  -->
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
